<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import { ElTable, FormInstance } from "element-plus"
import { sizeDate, Y, M, D, shortcuts } from "@/utils/dateSet"

// 接口
import { getShippingActList, downLoadExcel } from "@/api/SZ/ShippingAct"
import { getqueryTeamName } from "@/api/SZ/SZXxfy"
import { usePagination } from "@/hooks/usePagination"
import { Search, Refresh, RefreshRight } from "@element-plus/icons-vue"
const loading = ref(true)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
defineOptions({
  name: "ShippingAct"
})
const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
const shopList = ref<any>([])
const comboList = ref<any>([])

/**店铺数据 */
const getShopList = () => {
  getqueryTeamName().then((res: any) => {
    if (res.code == 200) {
      shopList.value = res.data
      // console.log(res)
    }
  })
}
getShopList()
//清除查询日期
const clearDate = (val: any) => {
  // console.log(val)
  if (!val) {
    searchData.searchDate = []
  }
}

// #region 查
const tableTotal = ref<number>()
const tableData = ref<any[]>([])
const tableObj = ref<any>({})
const getList = () => {
  loading.value = true
  getShippingActList({
    pageNum: paginationData.currentPage,
    pageSize: paginationData.pageSize,
    shopName: searchData.shopName,
    packageId: searchData.packageId,
    StartTime:
      searchData.searchDate && searchData.searchDate.length ? new Date(searchData?.searchDate[0]).getTime() : "",
    EndTime: searchData.searchDate && searchData.searchDate.length ? new Date(searchData?.searchDate[1]).getTime() : ""
  })
    .then((res: any) => {
      tableData.value = res.data.list
      tableObj.value = res.data
      tableTotal.value = res.data.total
      loading.value = false
    })
    .catch(() => {
      tableData.value = []
      loading.value = false
    })
}
// #endregion

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive<any>({
  shopName: [],
  searchDate: [
    new Date(Y.value, M.value, D.value, 0, 0, 0).getTime() - 3600 * 1000 * 24 * 7,
    new Date(Y.value, M.value, D.value, 23, 59, 59)
  ],
  packageId: []
})
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getList()
    console.log("重置")
  }
  paginationData.currentPage = 1
}
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    getList()
    console.log("查询")
  }
  paginationData.currentPage = 1
}
// #endregion

//所有套餐权限
import { getComboDataApi10 } from "@/api/combo"
import { useDebounce } from "@/utils/debounce"
const loading1 = ref(false)
const comboAll = (val: any) => {
  if (val) {
    loading1.value = true
    useDebounce(() => {
      getComboDataApi10({
        state: "",
        // team: userStore.teamName || "",
        name: val
      })
        .then((res: any) => {
          comboList.value = res.data
        })
        .catch(() => {
          comboList.value = []
        })
        .finally(() => {
          loading1.value = false
        })
    }, 1500)()
  } else {
    comboList.value = []
  }
}
/**表单合计 */
const summaryMethod = ({ columns }: any) => {
  const sums = [] as any

  columns.forEach((column: any, index: any) => {
    // console.log(index, 9999)

    if (index === 0) {
      sums.push("合计") // 第一列显示合计
    } else if (index === 3) {
      sums.push(tableObj.value.discardCount)
    } else if (index === 4) {
      sums.push(tableObj.value.recordCount)
    } else if (index === 5) {
      sums.push(tableObj.value.deliveryCount)
    } else if (index === 6) {
      sums.push(tableObj.value.recordRate)
    } else if (index === 7) {
      sums.push(tableObj.value.failureCount)
    } else if (index === 8) {
      sums.push(tableObj.value.discardRate)
    } else if (index === 9) {
      sums.push(tableObj.value.activationCount)
    } else if (index === 10) {
      sums.push(tableObj.value.activationRate)
    } else if (index === 11) {
      sums.push(tableObj.value.deliveryRate)
    } else if (index === 12) {
      sums.push("")
    } else {
      sums.push("")
    }
  })

  return sums
}
const handleRefresh = () => {
  getList()
}
/**导出数据 */
const downLoad = () => {
  downLoadExcel({
    shopName: searchData.shopName,
    packageId: searchData.packageId,
    StartTime:
      searchData.searchDate && searchData.searchDate.length ? new Date(searchData?.searchDate[0]).getTime() : "",
    EndTime: searchData.searchDate && searchData.searchDate.length ? new Date(searchData?.searchDate[1]).getTime() : ""
  }).then((res: any) => {
    const blob = new Blob([res.data], {
      type: "application/xlsx;charset=utf-8"
    })
    // console.log(res)
    const downloadElement = document.createElement("a")
    const href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = "发货激活表(明细).xlsx"
    document.body.appendChild(downloadElement)
    downloadElement.click()
    window.URL.revokeObjectURL(href)
  })
}
/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getList, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="searchDate" label="日期">
          <el-date-picker
            v-model="searchData.searchDate"
            type="datetimerange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            :size="sizeDate"
            :default-time="defaultTime1"
            @change="clearDate"
          />
        </el-form-item>
        <el-form-item prop="shopName" label="店铺">
          <el-select v-model="searchData.shopName" clearable filterable multiple placeholder="请选择">
            <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="packageId" label="套餐">
          <el-select
            v-model="searchData.packageId"
            clearable
            filterable
            multiple
            placeholder="请输入关键字快速查询"
            style="width: 240px"
            remote
            reserve-keyword
            :remote-method="comboAll"
            :loading="loading1"
          >
            <el-option
              v-for="item in comboList"
              :class="item.state == 'false' ? 'Xjstate' : ''"
              :key="item.id"
              :label="item.name"
              :value="item.id + ''"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 中间部分 -->
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div />
        <div>
          <el-tooltip content="下载">
            <el-link
              type="primary"
              style="margin-right: 20px; font-size: 12px; vertical-align: baseline"
              @click="downLoad"
              >下载数据</el-link
            >
          </el-tooltip>
          <el-tooltip content="刷新表格">
            <el-button type="primary" :icon="RefreshRight" circle @click="handleRefresh" />
          </el-tooltip>
        </div>
      </div>
      <!-- 中间渲染内容 -->
      <div class="table-center" style="padding-bottom: 100px">
        <el-table :data="tableData" v-horizontal-scroll="'always'" show-summary :summary-method="summaryMethod">
          <el-table-column label="套餐id" align="center" prop="packageId" />
          <el-table-column label="套名称" align="center" prop="packageName" />
          <el-table-column label="订单来源" align="center" prop="orderSource" />
          <el-table-column label="废单量" align="center" prop="discard" />
          <el-table-column label="录单量" align="center" prop="record" />
          <el-table-column label="发货量" align="center" prop="delivery" />
          <el-table-column label="占录单发货率" align="center" prop="recordRate">
            <template #default="scope">
              <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.recordRate" />
            </template>
          </el-table-column>
          <el-table-column label="失败量" align="center" prop="failure" />
          <el-table-column label="占录单失败率" align="center" prop="discardRate">
            <template #default="scope">
              <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.discardRate" />
            </template>
          </el-table-column>
          <el-table-column label="激活量" align="center" prop="activation" />
          <el-table-column label="占录单激活率" align="center" prop="activationRate">
            <template #default="scope">
              <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.activationRate" />
            </template>
          </el-table-column>
          <el-table-column label="占发货激活率" align="center" prop="deliveryRate">
            <template #default="scope">
              <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.deliveryRate" />
            </template>
          </el-table-column>
          <el-table-column label="判定" align="center" prop="judgment" />
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :page-size="paginationData.pageSize"
          :total="tableTotal"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
// .box-card {
//   height: 70px;
//   margin-bottom: 20px;
// }
.search-wrapper {
  margin-bottom: 20px;
}
.middle-top {
  margin-bottom: 20px;
}
.table-center {
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
}
/* 下架套餐显示灰色 */
.Xjstate {
  color: #afadad;
  /* background: #e7e7e7; */
}
.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
=
